<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <title>json-server</title>
</head>
<body>
    <div class="container">
    <table class="table">
        <caption>文章表</caption>
        <thead>
            <tr>
                <td>序号</td>
                <td>标题</td>
                <td>作者</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <form name="postForm">
        <div class="form-group">
            <label for="titleInput">标题</label>
            <input type="text" name="title" class="form-control" 
            id="titleInput" required placeholder="请输入标题">
            <!-- required 数据为空不能提交 -->
        </div>
          <div class="form-group">
            <label for="authorInput">作者</label>
            <input type="text" name="author" class="form-control" id="authorInput" placeholder="请输入作者">
        </div>
        <button class="btn btn-default" type="submit">添加</button>
    </form>
    </div>
    <a href="http:www.baidu.com" id="linkA">去百度</a>
    <script>
        const oForm = document.forms['postForm']
        const oTBody = document.querySelector('table tbody');
        const oLink = document.getElementById('linkA');

        // 功能抽象  post对象   变成 tr html字符串
        const getPostHtml=(post) => `
            <tr>
                <td>${post.id}</td>
                <td>${post.title}</td>
                <td>${post.author}</td>
            </tr>
        `;
        
        oLink.addEventListener('click',function(event){
            event.preventDefault();
        })
        let  id=3;
        // console.log(oForm);
        oForm.addEventListener('submit',function(event) {
            // form 默认向后端提供数据
            // console.log('请先不要向后端提供数据')
            event.preventDefault();
            const title = oForm["title"].value.trim(); // trim 去除空格
            const author = oForm["author"].value.trim();
            // document 文档中 去查找 css querySelector  table tbody
            console.log(title);

            oTBody.innerHTML +=
                getPostHtml({
                    id,
                    title,
                    author
                })

            id++;
            // 清空表单
            oForm.reset();

        })
        fetch('http://localhost:3000/posts')
            .then(data => data.json())
            .then(data => {
                // 前端和后端通信的数据格式是 json
                // console.log(data)
                oTBody.innerHTML = data.map(post => getPostHtml(post))
                .join('')
                console.log('aaaaaaaaaaaaaaaaaa')
            })
            console.log('1111111')
    </script>
</body>
</html>